<link rel="stylesheet" href="../assets/common.less">
<template>
  <div class="chat-item flex ask-wrapper" @mouseleave="showOpt=false" @mouseover="showOpt=true">
    <div class="left-icon"><MeIcon/></div>
    <div class="block right-chat-wrapper">
      <div class="ask-chat-wrapper flex">
        <div :class="'chat-content message-wrapper ' + (messageEditable ? 'editable' : '')">
          <div class="message" :contenteditable="!messageEditable ? undefined : 'true'" ref="messageEditor" @input="resetMessage">
            {{message}}
          </div>
        </div>
        <div class="opt-area flex ask-opt-area" v-show="showOpt">
          <div class="opt-btn" @click="copyTo">
            <el-icon><copy-icon></copy-icon></el-icon>
          </div>
          <div class="opt-btn" @click="setMessageEditable(true)">
            <el-icon><editor-icon></editor-icon></el-icon>
          </div>
          <div class="opt-btn">
            <el-icon><delete-icon></delete-icon></el-icon>
          </div>
        </div>
      </div>
      <div class="opt-area" v-show="messageEditable">
        <el-button class="confirm opt-btn" type="primary" @click="resetAsk">提交</el-button>
        <el-button class="cancel opt-btn" @click="setMessageEditable(false)">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MeIcon from "@/components/icons/meIcon.vue";
import {inject, ref, watch} from "vue";
import CopyIcon from "@/components/icons/copyIcon.vue";
import DeleteIcon from "@/components/icons/deleteIcon.vue";
import EditorIcon from "@/components/icons/editorIcon.vue";
import {copy} from "@/utils/helper";
import { ElMessage } from 'element-plus';

const messageEditor = ref(null);
const content = defineProps({
  message: String,
});

const showOpt = ref(false);
const copyTo = () => {
  copy(content.message?content.message:'');
  //elMessage.success('复制成功');
  ElMessage({
    type: 'success',
    message: '复制成功'
  });
}
const message =ref(content.message);
message.value = content.message ? content.message.toString() : '';
const messageEditable = ref(false);
let oldMessage: any = '';
const setMessageEditable = (editable: boolean) => {
  messageEditable.value = editable;
  if(editable) {
    oldMessage = message.value;
    const node: any = messageEditor.value;
    node.autofocus = true;
    node?.focus();
    const range = document.createRange();
    range?.selectNodeContents(node);
    range?.collapse(false);
    const selector  =  window.getSelection();
    selector?.removeAllRanges();
    selector?.addRange(range);
    // 设置range对象开始位置
    range?.setStart(node, 1);
    // 设置range对象结束位置
    range?.setEnd(node, 1);
  }else{
    message.value = oldMessage;
  }
}

const resetMessage = (e:any) => {
  message.value = e.target.innerText;
}
const resetAsk = () => {
  messageEditable.value = !messageEditable.value;
}
watch(() =>content.message, (m: string|undefined) => {
  console.log(message)
  message.value = m;
});
</script>

<style lang="less" >
.message-wrapper {
  background: #DBEAFF;
  max-width: calc(100% - 100px);
}
.right-chat-wrapper {
  width: calc(100% - 40px);
}
.ask-chat-wrapper {
  width: 100%;
}
.opt-area {
  .opt-btn {
    width: 60px;
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
  }
  margin-left: 32px;
  margin-top: 8px;
}
.message-wrapper.editable{
  border: 1px #002bff42 solid;
  cursor: text;
}
.right-chat-wrapper{
  width: calc(100% - 61px);
}
.ask-opt-area {
  right: 0;
  position: absolute;
  cursor: pointer;
  .opt-btn{
    width: 26px;
    text-align: center;
  }
}
</style>